<template>
    <div class="all">
        <el-row>
            <el-col :span="16" :offset="4">
                <div class="top-box">
                    <el-image style="width: 100%;" :src="require('@/assets/imgs/lectur-1.png')"></el-image>
                </div>
                <div class="search-box">
                    <div>
                        <el-input placeholder="请输入内容" size="small" v-model="key" class="input-with-select">
                            <el-button slot="append" icon="el-icon-search" @click="getSearch"></el-button>
                        </el-input>
                    </div>
                </div>
                <div class="lecturelist">
                    <div class="lecture-box" v-for="(item, index) in lectuerlist " :key="index" @click="getNav">
                        <div class="lecture-aside">

                            <el-image style="width: 230px;" :src="require('@/assets/imgs/lecturer.png')"></el-image>
                            <div class="lecture-name lecture-padd">
                                <div style="font-size: 14px;font-weight: bolder;">{{ item.name }}</div>
                                <div style="color: #676767;display: flex;align-items: center;">
                                    <el-image style="width: 20px; height: 20px"
                                        :src="require('@/assets/imgs/1.png')"></el-image>
                                    {{ item.name }}
                                </div>
                            </div>

                            <div class="lecture-title lecture-padd">
                                {{ item.title }}
                            </div>

                            <div class="lecture-score lecture-padd">
                                <div class="score-box">评分:
                                    <span>0</span>
                                </div>
                                <div class="score-box">总课时:
                                    <span>10</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="page-size">
                    <el-pagination background layout="prev, pager, next" :total="1000">
                    </el-pagination>
                </div>
                <div style="height: 100px;"></div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
export default {
    data() {
        return {
            currentPage1: 1,
            key: null,
            lectuerlist: [
                {
                    name: '讲师一',
                    level: '金牌讲师',
                    title: '系统的使用及维护'
                }, {
                    name: '讲师一',
                    level: '金牌讲师',
                    title: '系统的使用及维护'
                },
                {
                    name: '讲师一',
                    level: '金牌讲师',
                    title: '系统的使用及维护'
                },
                {
                    name: '讲师一',
                    level: '金牌讲师',
                    title: '系统的使用及维护'
                },
                {
                    name: '讲师一',
                    level: '金牌讲师',
                    title: '系统的使用及维护'
                },
                {
                    name: '讲师一',
                    level: '金牌讲师',
                    title: '系统的使用及维护'
                },
                {
                    name: '讲师一',
                    level: '金牌讲师',
                    title: '系统的使用及维护'
                }
            ]
        }
    },
    methods: {
        getSearch() {
            console.log('搜索');
        },

        handleSizeChange(e) {

        },
        handleCurrentChange(e) {

        },
        getNav() {
            this.$router.push({
                path: '/lecturerdesc'
            })
        }
    }
}
</script>


<style lang="scss" scoped>
.all {
    .top-box {
        width: 98.5%;
        min-height: 300px;
        border-radius: 10px;
        background-color: #fff;
        overflow: hidden;
        margin: 0 auto;
    }

    .search-box {
        display: flex;
        justify-content: flex-end;
        box-sizing: border-box;
        padding: 10px 10px;
    }

    .lecturelist {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;

        .lecture-box {
            width: 20%;
            display: inline-flex;
            justify-content: center;

            .lecture-aside {
                display: flex;
                flex-direction: column;
                justify-content: center;
                flex-direction: column;
                margin-top: 10px;
                min-height: 300px;
                border-radius: 10px;
                overflow: hidden;
                font-size: 13px;
                background-color: #fff;

                .lecture-name {
                    display: flex;
                    justify-content: space-between;
                }

                .lecture-title {
                    color: #676767;
                }

                .lecture-padd {
                    box-sizing: border-box;
                    padding: 5px 10px;
                }

                .lecture-score {
                    display: flex;
                    justify-content: space-between;
                    color: #676767;

                    span {
                        color: #FF9900;
                        font-weight: bolder;
                    }

                }
            }





        }

        .lecture-aside:hover {
            box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.1);
        }
    }

    .page-size {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
    }
}
</style>